<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>网络状态 & 强网弱网环境</title>
	</head>
	<body>
		<script>
			// 1. 前端的网络状态如何获取以及对应的事件
			console.log('网络状态：' + navigator.onLine) // true在线，false离线

			window.addEventListener('online', function () {
				alert('网络状态变为在线')
			})

			window.addEventListener('offline', function () {
				alert('网络状态变为离线')
			})

			// 2. 如何区分弱网环境和强网环境
			console.log('网络类型：', navigator.connection)

			function isWeakNet() {
				const weakNetTypes = ['slow-2g', '2g', '3g']
				return weakNetTypes.includes(navigator.connection.effectiveType)
			}

			console.log('是否弱网环境：' + isWeakNet())
		</script>
	</body>
</html>
